<template>
  <div class="layout-padding">
    <div class="layout-padding-view">
      <splitpanes>
        <pane>  <!-- 顶部 -->
          <el-card class="h-full">
            <template #header>
              <div class="flex justify-between items-center h-8">
                <h1 class="text-xl font-bold">① 编排</h1>
                <top v-if="showTop" :lf="lf" :flowDetail="flowDetail"></top>
              </div>
            </template>
            <div class="logic-flow-view">
              <div id="LF-view" ref="container"></div>
            </div>
          </el-card>
        </pane>
        <pane>
          <!-- 属性面板 -->
          <PropertyDialog v-if="showAttribute" :nodeData="nodeData" :flowDetail="flowDetail" :lf="lf"></PropertyDialog>
        </pane>
        <pane>
          <debug-dialog :funcName="funcName" :welcomeMsg="welcomeMsg"/>
        </pane>
      </splitpanes>
    </div>
  </div>
</template>
<script setup lang="ts">
import LogicFlow from '@logicflow/core';
import {Menu, Snapshot, MiniMap} from '@logicflow/extension';
// import '@logicflow/core/dist/style/index.css';
import '@logicflow/extension/lib/style/index.css';
import start from './design/registerNode/start/start.ts';
import funcDesc from '/@/views/aiknowledge/workflow/design/registerNode/funcDesc/funcDesc.ts';
import registerBezier from './design/registerEdge/registerBezier.ts';
import result from './design/registerNode/result/result.ts';
import exec from '/@/views/aiknowledge/workflow/design/registerNode/exec/exec.ts';
import endParallel from './design/registerNode/endParallel/endParallel.ts';
import variables from '/@/assets/styles/variables.module.scss';
import PropertyDialog from './design/PropertySetting/PropertyDialog.vue';
import top from './design/LFComponents/top.vue';
import {flowJsonOption, flowJsonThemeOption} from "/@/views/aiknowledge/workflow/workflow";
import {getObj} from '/@/api/knowledge/aiFunc'

const DebugDialog = defineAsyncComponent(() => import('./debug.vue'));

let lf = reactive<any>({});
let nodeData = ref(flowJsonOption.nodes[0]);
let showAttribute = ref(false);
let config = reactive({
  background: {
    backgroundColor: variables.dragPanelBgColor,
  },
  grid: {
    size: 10,
    visible: false,
  },
  keyboard: {
    enabled: false,
  },
  adjustEdge: false, //允许调整边
  adjustEdgeStartAndEnd: false, //是否允许拖动边的端点来调整连线
  edgeSelectedOutline: true, //鼠标 hover 的时候显示边的外框
  // edgeTextDraggable: true,
  hoverOutline: false,
  nodeTextEdit: false, //节点是否可编辑。false不可编辑
  edgeTextEdit: false, //边是否可编辑。false不可编辑
  autoExpand: false, //点拖动靠近画布边缘时是否自动扩充画布
  textEdit: false, //是否开启文本编辑
  snapline: false, //对齐线。false不开启
});
let flowDetail = reactive({});
let container = ref(null);
let showLf = ref(false);
let showTop = ref(false);

const $_initLf = () => {
  // 画布配置
  const myLf = new LogicFlow({
    ...config,
    plugins: [Menu, MiniMap, Snapshot],
    //@ts-ignore
    container: container.value,
  });
  lf = myLf;
  showLf.value = true;
  // 设置主题
  lf.setTheme(flowJsonThemeOption);
  lf.setDefaultEdgeType('myBezier'); //线类型，贝塞尔曲线
  $_registerNode();
};

// 自定义
const flowJson = ref(flowJsonOption)
const $_registerNode = () => {
  start(lf);
  funcDesc(lf);
  exec(lf);
  endParallel(lf);
  result(lf);
  lf.register(registerBezier);
  $_render();
};

const $_render = () => {
  showTop.value = true;
  lf.render(flowJson.value); //回显
  $_LfEvent();
};

const $_LfEvent = () => {
  //来自节点的事件中心发出的事件
  lf.on('node:click', ({data}: any): void => {
    nodeData.value = data;
    if (['start', 'funcDesc', 'exec', 'result'].includes(data.type)) {
      showAttribute.value = true;
    }
  });
};

const route = useRoute();
const funcName = ref()
const welcomeMsg = ref()
onMounted(async () => {
  if (route.query?.id) {
    const res = await getObj({id: route.query.id});
    const flow = res.data[0];
    flowJson.value = JSON.parse(flow.flowJson);
    flowDetail = {
      flowName: flow.funcName,
      flowId: flow.id,
      flowJson: flowJson.value
    };

    funcName.value = flow.funcName;
    welcomeMsg.value = flow.welcomeMsg;
    nodeData.value = flowJson.value.nodes[0];
  }
  await $_initLf();
  showAttribute.value = true;
});
</script>
<style lang="scss">
.logic-flow-view {
  height: 85vh;
  position: relative;
}

.demo-control {
  position: absolute;
  top: 15px;
  right: 100px;
  z-index: 2;
}

#LF-view {
  width: 100%;
  height: 100%;
  outline: none;
}

.time-plus {
  cursor: pointer;
}

.add-panel {
  position: absolute;
  z-index: 11;
  background-color: white;
  padding: 10px 5px;
}

.el-drawer__body {
  height: 80%;
  overflow: auto;
  margin-top: -30px;
  z-index: 3;
}

.lf-node-text-auto-wrap {
  cursor: pointer;
}

/* 适应节点图标 */
.lf-node-text-ellipsis-content {
  padding: 0 8px 0 34px !important;
}

.node-title {
  height: 40px;
  width: 100%;
  background: #fff;
  border: 1px solid #e6f7ff;
  box-sizing: border-box;
  padding: 10px 10px 10px 6px;
  border-radius: 8px;
  cursor: pointer;
}

.node-icon {
  width: 26px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
}

.node-name > span {
  border: none !important;
}

//logicflow小地图
.lf-mini-map {
  border: none !important;
  box-shadow: 3px 0 10px 1px rgb(228, 224, 219);
}

.lf-mini-map-header {
  border: none !important;
  font-size: 13px;
  height: 24px !important;
  line-height: 24px !important;
  // color: #fff;
  background-color: #ecf5ff !important;
  background-image: none !important;
}

.lf-mini-map-close {
  top: 2px !important;
}

@keyframes lf_animate_dash {
  to {
    stroke-dashoffset: 0;
  }
}
</style>
